<template>
	<view :style="{ '--color': color }">
		<view class="exchange">
			<text class="black size36 bold">请输入兑换码</text>
			<view class="row a-center m-top30">
				<input type="text" class="exchange-Input" placeholder="请输入..." v-model="card_passwd" />
				<view class="d-flex f-column a-center p-left40" @click.stop="Scan">
					<view class="iconfont icon-saoyisao black size50"></view>
					<text class="color_33 h7">扫码兑换</text>
				</view>
			</view>
			<view class="NowBtn" @click="ExchangeBtn(1)">立即兑换</view>
		</view>

		<u-popup :show="showPassword" @close="showPassword = false" :round="10">
			<view class="Box">
				<text class="title">兑换水卡</text>
				<view class="row a-center m-top20" v-if="carData">
					<image :src="carData.logo" mode="aspectFill" class="logo"></image>
					<view class="d-flex d-flex f-column j-sb">
						<text class="color_33 size32 ellipsis" v-if="carData.name">{{ carData.name }}</text>
						<text class="color_99 h6 ellipsis m-top10" v-if="carData.desc">{{ carData.desc }}</text>
					</view>
				</view>
				<view class="row j-centert m-top60" v-if="carData.passwd">
					<input type="text" class="verify_passwd" v-model="verify_passwd" placeholder="请输入密码~" :cursor-spacing="120" />
				</view>
				<view class="Continue" @click="ExchangeBtn(2)">立即兑换</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			showPassword: false,
			card_passwd: '',
			verify_passwd: '',
			carData: '' // 卡的信息
		};
	},
	methods: {
		ExchangeBtn(type) {
			if (type == 1 && !this.card_passwd) return this.$Toast('请输入兑换码');
			if (type == 2 && this.carData && this.carData.passwd && !this.verify_passwd) return this.$Toast('请输入兑换密码');
			this.$showLoading('');
			this.$http
				.post({
					url: '/TimeCardApi/exchangeOfflineCard',
					data: {
						card_passwd: this.card_passwd,
						verify_passwd: this.verify_passwd,
						type
					}
				})
				.then((res) => {
					this.$hideLoading();
					this.showPassword = false;
					if (type == 1) {
						if (res.code != 200) return this.$Toast(res.msg);
						const result = res.data;
						this.carData = result;
						this.showPassword = true;
					} else {
						if (res.code != 200) return this.$Toast(res.msg);
						this.$Toast(res.msg);
						this.card_passwd = '';
					}
					this.$emit('updataData');
				});
		},
		Scan() {
			uni.scanCode({
				success: (res) => {
					if (res.result) {
						this.card_passwd = res.result;
						this.ExchangeBtn(1);
					}
				},
				fail: (fail) => {
					this.$Toast(fail);
				}
			});
		}
	},
	computed: {
		...mapState(['color'])
	}
};
</script>

<style lang="scss" scoped>
.Box {
	width: 100%;
	padding: 50rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.title {
		color: #000;
		font-size: 34rpx;
	}

	.logo {
		width: 90rpx;
		height: 90rpx;
		border-radius: 6rpx;
		margin-right: 20rpx;
	}

	.Continue {
		width: 500rpx;
		height: 88rpx;
		background-color: var(--color);
		color: #fff;
		font-size: 30rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}

	.verify_passwd {
		width: 600rpx;
		height: 88rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		color: #000;
		font-size: 32rpx;
		border: 1px solid #999;
		text-align: center;
	}
}
.exchange {
	width: 690rpx;
	padding: 50rpx 30rpx;
	background-color: #ffffff;
	margin: 40rpx auto;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;

	&-Input {
		flex: 1;
		height: 80rpx;
		background-color: #f2f2f2;
		padding: 0 14rpx;
		border-radius: 10rpx;
		color: black;
		font-size: 30rpx;
	}

	.NowBtn {
		width: 100%;
		height: 90rpx;
		background-color: var(--color);
		color: #ffffff;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 45rpx;
		margin-top: 36rpx;
	}
}
</style>
